<template>
	<a-card>
		<div :class="advanced ? 'search' : null">
			<a-form :form="searchForm" layout="horizontal">
				<div :class="advanced ? null: 'fold'">
					<a-row>
						<a-col :md="5" :sm="24">
							<a-form-item label="订单号" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
								<a-input v-model="searchForm.trade_no" placeholder="请输入订单号" allowClear/>
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item label="商品名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
								<a-input v-model="searchForm.cert_name" placeholder="请输入商品名称" allowClear/>
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item label="推广员" :labelCol="{span: 4}" :wrapperCol="{span: 18, offset: 1}">
								<a-input v-model="searchForm.sale_name" placeholder="请输入推广员名字" allowClear/>
							</a-form-item>
						</a-col>
						<a-col :md="5" :sm="24">
							<a-form-item label="状态" :labelCol="{span: 4}" :wrapperCol="{span: 18, offset: 1}">
								<el-select v-model="searchForm.order_status" placeholder="全部" clearable >
									<el-option v-for="item in statusList" :key="item.id" :label="item.name"
										:value="item.id"></el-option>
								</el-select>
							</a-form-item>
						</a-col>
						<a-col :md="1">
							<span style="display: inline-block; float: right; margin-top: 3px;margin-right: -20px;">
								<a-button type="primary" @click="handleSearch">查询</a-button>
							</span>
						</a-col>
					</a-row>
				</div>
			</a-form>
		</div>
		<div>
			<el-table :data="tableData" border style="width: 100%">
				<!-- <el-table-column fixed prop="order_id" label="ID" /> -->
				<el-table-column prop="trade_no" label="订单号" />
				<el-table-column prop="cert_name" label="姓名" />
				<el-table-column prop="goods_title" label="商品名称" />
				<el-table-column prop="faname" label="推广员" />
				<el-table-column prop="orderLease" label="租期" />
				<el-table-column prop="create_time" label="租赁时间" />
				<el-table-column prop="rent_total" label="租金" />
				<el-table-column prop="statusName" label="订单状态" />
				<el-table-column prop="reward" label="佣金" />
			</el-table>
		</div>
		<div class="flex align-center justify-end custom_page">
			<span class="total">共{{ pageTotal }}页</span>
			<span class="total">共{{ total }}条</span>
			<el-pagination class="text-right" prev-text="上一页" next-text="下一页" :page-size="pageSize"
				:page-sizes="pageList" :total="total" background :layout="layout" :current-page.sync="page"
				@current-change="handleCurrentChange" @size-change="handleSizeChange" />
		</div>
	</a-card>
</template>

<script>
	import {
		orderList
	} from '@/api/order'
	import globalData from "@/utils/other/global"
	export default {
		name: 'StandardList',
		components: {},
		data() {
			return {
				advanced: true,
				searchForm: {
					orderNo: '',
					cert_name: '',
					goods_name: '',
					sale_name: '',
					begin_time: '',
					order_status: ''
				},
				tableData: [],
				total: 0,
				page: 1,
				pageSize: 10,
				pageList: [5, 10, 20, 50, 100],
				statusList: globalData.orderStatus,
			}
		},
		computed: {
			pageTotal() {
				const num = Math.ceil(this.total / this.pageSize)
				return num > 0 ? num : 1
			},
			layout() {
				if (this.total === 0) {
					return 'prev, pager, next'
				}
				if (this.pageTotal > 1) {
					return 'sizes, prev, pager, next, jumper'
				}
				return 'sizes, prev, pager, next'
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList(flag) {
				const params = {
					page: this.page,
					pageSize: this.pageSize,
					orderNo: this.searchForm.orderNo,
					cert_name: this.searchForm.cert_name,
					goods_name: this.searchForm.goods_name,
					sale_name: this.searchForm.sale_name,
					begin_time: this.searchForm.begin_time,
					order_status: this.searchForm.order_status
				}
				if (!flag) {
					this.tableData = []
				}
				orderList(params).then(res => {
					// console.log(res);
					this.tableData = res.data
					this.total = res.total
				})
			},
			handleSearch() {
				this.getList()
			},
			changePageSize(val) {
				this.pageSize = val
				if (this.pageList.indexOf(val) === -1) {
					this.pageList.unshift(val)
				}
			},
			handleSizeChange(val) {
				this.page = 1
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			}
		}
	}
</script>

<style lang="less" scoped>
	.steps {
		max-width: 950px;
		margin: 16px auto;
	}

	.custom_page {
		margin-top: 15px;

		.total {
			margin-right: 10px;
		}

		.page_btn {
			color: #333333;
			background: #ffffff;
			border: 1px solid #eeeeee;
			font-size: 14px;
			padding-left: 12px;
			padding-right: 12px;
			min-width: 30px;
			border-radius: 2px;
			height: 28px;
			vertical-align: top;
			cursor: pointer;
		}

		.el-pagination__jump {
			margin-left: 10px;
			margin-right: 10px;
		}
	}
</style>
